const path = require('path');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// const glob = require('glob-all');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
const env = process.env.NODE_ENV
function resolve(dir) {
	return path.join(__dirname, dir)
}

module.exports = {
	pages: {
        'views': {
            // page 的入口
            entry: 'src/views/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
			title: '金紫尖商城管理总后台',
			// 在这个页面中包含的块，默认情况下会包含
			// 提取出来的通用 chunk 和 vendor chunk。
			chunks: ['chunk-vendors', 'chunk-common', 'views']
        },
        'h5-views': {
            // page 的入口
            entry: 'src/h5-views/h5-main.js',
            // 模板来源
            template: 'public/mobile.html',
            // 在 dist/index.html 的输出
            filename: 'mobile.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
			title: '',
			// 在这个页面中包含的块，默认情况下会包含
			// 提取出来的通用 chunk 和 vendor chunk。
			chunks: ['chunk-vendors', 'chunk-common', 'h5-views']
        }
    },
	// 这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径，你可以使用一个条件式的值
	publicPath: env !== 'production' ? '/' : './',

	//当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
	//注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
	outputDir: '../web',

	//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
	assetsDir: 'static',

	//指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
	// indexPath: 'index.html',

	//当 lintOnSave 是一个 truthy 的值时，eslint-loader 在开发和生产构建下都会被启用。
	//如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置：
	lintOnSave: env !== 'production',

	//是否使用包含运行时编译器的 Vue 构建版本。
	//设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
	runtimeCompiler: true,

	//默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
	//如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。

	//如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
	productionSourceMap: false,

	//设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
	//使用crossorigin属性，使得加载的跨域脚本可以得出跟同域脚本同样的报错信息。
	crossorigin: undefined,

	//在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
	//如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性, 这个标签是为了防止 CDN 篡改 javascript 用的。 。
	integrity: true,
	chainWebpack: config => {
		if(env === 'production') {
			config.optimization.minimize(true)
			// vue-cli3优化方案 https://juejin.im/post/5c85af5de51d451a5a520021
			//防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
			// 	config.externals({
			// 		'vue': 'vue',
			// 		'vuex': 'vuex',
			// 		'vue-router': 'vue-router',
			// 		'element-ui': 'element-ui',
			// 		'axios': 'axios'
			// 	})
		}

		// 修复 HMR(热更新)失效
		config.resolve.symlinks(true);

		// // 修复Lazy loading routes Error： Cyclic dependency 
		config.plugin('html-views').tap(args => {
			args[0].chunksSortMode = 'none'
			return args
		})
		config.plugin('html-h5-views').tap(args => {
			args[0].chunksSortMode = 'none'
			return args
        })
		// 添加别名
		config.resolve.alias
			.set('@', resolve('src'))
			// .set('components', resolve('src/components'))
			// .set('base', resolve('src/base'))
			// .set('styles', resolve('src/styles'))
			// .set('images', resolve('src/images'))
			// .set('api', resolve('src/api'))
			// .set('store', resolve('src/store'))
			// .set('router', resolve('src/router'))
			
		config.module
	      .rule('svg')
	      .exclude.add(resolve('src/icons'))
	      .end()
	    config.module
	      .rule('icons')
	      .test(/\.svg$/)
	      .include.add(resolve('src/icons'))
	      .end()
	      .use('svg-sprite-loader')
	      .loader('svg-sprite-loader')
	      .options({
	        symbolId: 'icon-[name]'
	      })
	      .end()	
	},
	css: {
		modules: false,
		//如果你希望自定义生成的 CSS Modules 模块的类名
		loaderOptions: {
			css: {
				localIdentName: '[name]-[hash]',
				camelCase: false
			},
			//公共sass引入
			//sass: {
			//	data: `@import "@/styles/index.scss";`
			//}
		},
		//生产环境下是 true，开发环境下是 false
		extract: env === 'production' ? true : false,
		sourceMap: env === 'production' ? false : true
	},
	configureWebpack: config => {
		
		if(env === 'production') {
			//插件应用
			const plugins = []
			
			//清除console
			// plugins.push(
			// 	new UglifyJsPlugin({
			// 		uglifyOptions: {
			// 			compress: {
			// 				warnings: false,
			// 				drop_console: true,
			// 				drop_debugger: false,
			// 				pure_funcs: ['console.log'] //移除console
			// 			}
			// 		},
			// 		sourceMap: false,
			// 		parallel: true
			// 	})
			// )
		
			//开启gzip压缩
			plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: productionGzipExtensions,
                    threshold: 10240,
                    minRatio: 0.8
				})
			)
			config.plugins = [...config.plugins, ...plugins]

		}
	},
	//第三方插件
	pluginOptions: {

	},
	pwa: {

	},
	devServer: {
		host: 'localhost',
		port: 8991,
		https: false,
		hot: true,
		overlay: {
			warnings: true,
			errors: false
		},
		proxy: {
			'/web': {
				ws: false,
				target: 'http://letaishop.dusnoob.com',
//				target: 'http://xz-dev.mamaqunaer.com',
				pathRewrite: {
					'^/web': ''
				},
				changeOrigin: true
			}
		},
		before: () => {
			// app
			// console.log(app)
		}
	}

}